<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Knockout.js</title>

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="root">
    <div data-bind="validationOptions:{insertMessages:false}">
      <div class="box">
        <div class="editor-label">
          first name
        </div>
        <div class="editor-field">
          <input type="text" data-bind="value:firstName, validationElement: firstName" />
        </div>
      </div>
      <div class="box">
        <div class="editor-label">
          last name
        </div>
        <div class="editor-field">
          <input type="text" data-bind="value:lastName, validationElement: lastName" />
        </div>
      </div>
      <div class="box">
        <div class="editor-label">
          score
        </div>
        <div class="editor-field">
          <input type="text" data-bind="value:score, validationElement: score" />
        </div>
      </div>

      <div class="box">
        <button data-bind="click:handleSubmit">提交</button>
      </div>
      <!--显示错误提示信息 start-->
      <div>
        <div>firstName:<span class="validationMessageTip" data-bind="validationMessage: firstName"></span></div>
        <div>lastName:<span class="validationMessageTip" data-bind="validationMessage: lastName"></span></div>
        <div>score:<span class="validationMessageTip" data-bind="validationMessage: score"></span></div>
      </div>
    </div>

    <script src="../scripts/lib/require.js" data-main="index.js"></script>
</body>

</html>